<template>
  <div class="deviceNoticeLog">
    <div class="mains_contain">
      <el-form :inline="true" :model="searchForm" size="small" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.deviceName" clearable placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="searchForm.nodeId" clearable placeholder="请输入设备标识" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" icon="el-icon-search" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="contant">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="nodeId" label="设备标识" align="center"/>
          <el-table-column prop="eventTime" label="上下线时间" align="center"/>
          <el-table-column prop="status" label="状态" align="center"/>
          <el-table-column label="操作" align="center" >
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="handleInfo(row)" icon="el-icon-view">详情</el-button>
              <!-- <el-button type="text" style="color:#F56C6C" size="mini" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
    <el-dialog title="日志详情" :visible.sync="dialogVisible" width="800px" top="5vh" v-dialogDrag :close-on-click-modal="false">
      <el-form ref="infoForm" :model="infoForm" label-width="100px" size="mini">
        <el-form-item label="设备ID">{{ infoForm.id }}</el-form-item>
        <el-form-item label="设备名称">{{ infoForm.deviceName }}</el-form-item>
        <el-form-item label="设备标识">{{ infoForm.nodeId }}</el-form-item>
        <el-form-item label="状态">{{ infoForm.status }}</el-form-item>
        <el-form-item label="上下线时间">{{ infoForm.eventTime }}</el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import * as api from "@/api/link/deviceNoticeLog";
import { isJSON } from "@/utils/index";
export default {
  comments: {},
  props: {},
  data() {
    return {
      //   multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      infoForm: {},
      searchForm: {},
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.getPageList();
  },
  mounted() { },
  methods: {
    handleInfo(row) {
      this.dialogVisible = true;
      var curRow = Object.assign(row);
      if (isJSON(curRow.body)) {
        curRow.body = JSON.parse(curRow.body);
      } else {
        curRow.body = {};
      }
      if (isJSON(curRow.responseBody)) {
        curRow.responseBody = JSON.parse(curRow.responseBody);
      } else {
        curRow.responseBody = {};
      }
      if (isJSON(curRow.responseData)) {
        curRow.responseData = JSON.parse(curRow.responseData);
      } else {
        curRow.responseData = {};
      }

      this.infoForm = curRow;
    },
    // 复选框事件
    handleSelectionChange(val) {
      //   this.multipleSelection = val;
    },
    getPageList() {
      this.searchList();
    },
    search() {
      this.pagination.page = 1;
      this.searchList();
    },
    searchList() {
      const p = Object.assign({}, this.pagination);
      if (this.searchForm.nodeId != undefined && this.searchForm.nodeId != "") {
        p.nodeId = this.searchForm.nodeId;
      }
      if (this.searchForm.deviceName != undefined && this.searchForm.deviceName != "") {
        p.deviceName = this.searchForm.deviceName;
      }
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteById(row.id).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="scss">
.deviceNoticeLog {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>



<style lang="scss">
.deviceNoticeLog {
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    line-height: 15px !important;
  }
}
</style>
